<template>
  <div class="oe-manage" v-loading="loading">
    <top-tip :title="titleList" :showBack="false"></top-tip>
    <div class="oe-manage-search">
      <!-- <div class="fr"> -->
        <span class="oe-manage-input">
          <a-input placeholder="输入题库分类名称" v-model="coursename">
            <template #prefix>
              <span class="iconfont icon-sousuo"></span>
            </template>
          </a-input>
          <a-button type="primary" @click.stop="searchList(coursename)" class="chaxun">查询</a-button>
        </span>
        <span class="oe-manage-btns">
          <a-button type="primary" @click="showModal('add')" v-if="operationList.includes('add/edit/del')"
            >新增</a-button
          >
        </span>
      <!-- </div> -->
      <a-modal :title="titleText" class="oe-modal" :visible="visible" @ok="handleOk" @cancel="handleCancels">
        <div class="oe-modal-margin">
          <span class="oe-modal-name">*</span>
          <span class="oe-modal-text">分类名称：</span>
          <span class="oe-modal-input">
            <a-input v-model="CourseName" placeholder="输入题库分类名称" />
          </span>
        </div>
        <span class="oe-modal-name">*</span>
        <span class="oe-modal-text">责任教师：</span>
        <span class="oe-modal-input">
          <a-select
            mode="multiple"
            style="width: 100%"
            showSearch
            :allowClear="true"
            v-model="CreateName"
            optionFilterProp="children"
            @change="selectTeacher"
            placeholder="请输入教师的姓名或工号查询"
          >
            <a-select-option v-for="item in selection" :index="index" :key="item.id">{{ item.text }}</a-select-option>
          </a-select>
        </span>
        <div class="oe-modal-upload">
          <span class="oe-modal-text">上传封面：</span>
          <oe-upload v-model="fileList"></oe-upload>
        </div>
        <template slot="footer">
          <a-button @click="sureModal()" type="primary" html-type="submit">确定</a-button>
          <a-button @click.stop="handleCancels">取消</a-button>
        </template>
      </a-modal>
    </div>
    <div class="oe-manage-contain">
      <div class="oe-manage-content">
        <a-list :grid="{ gutter: 16, column: 4 }" :dataSource="questionlist">
          <a-list-item slot="renderItem" slot-scope="item" style="cursor: pointer">
            <a-card>
              <img
                class="oe-img"
                alt="example"
                :src="item.CoverUrl | filCourseImg"
                slot="cover"
                @click.stop="jump(item)"
              />
              <span class="oe-list-span">{{ item.CourseName }}</span>
              <!-- <small class="oe-list-small">{{ item.CreateName }}</small> -->
              <!-- <a-popover
                placement="bottom"
                overlayClassName="oe-popover-item"
                class="oe-popover-item"
              >
                <template slot="content">
                  <div>
                    <a-button
                      type="link"
                      @click="showModal(item)"
                      v-if="operationList.includes('add/edit/del')"
                    >编辑</a-button>
                  </div>
                  <div>
                    <a-button
                      type="link"
                      @click="changeCourse(item.Id)"
                      v-if="operationList.includes('add/edit/del')"
                    >删除</a-button>
                  </div>
                  <div v-if="!(operationList.includes('add/edit/del'))">暂无操作权限</div>
                </template>
               <span  v-if="item.IsCanDo == true" class="oe-list-sp">
                 ...
               </span>
              
              </a-popover> -->
              <span v-if="item.IsCanDo == true" class="oe-list-sp">
                <i
                  class="iconfont icon-edit"
                  @click="showModal(item)"
                  v-if="operationList.includes('add/edit/del')"
                ></i>
                <i
                  class="iconfont icon-delete"
                  @click="changeCourse(item.Id)"
                  v-if="operationList.includes('add/edit/del')"
                ></i>
                <div v-if="!operationList.includes('add/edit/del')">暂无操作权限</div>
              </span>

              <div class="oe-info">负责人：{{ item.TeaNames }}</div>
            </a-card>
          </a-list-item>
        </a-list>
      </div>
    </div>
  </div>
</template>

<script>
import oeUpload from '@/components/oe-upload/index.vue';
import topTip from '@/components/top-tip/index.vue';
import GetOperationList from '@/lib/mixin/methods.js';
export default {
  mixins: [GetOperationList],
  components: {
    topTip,
    oeUpload,
  },
  data() {
    return {
      CourseName: '',
      CreateName: [],
      // 点击的分类
      clickBatch: '',
      // 图片的list
      fileList: [],
      // 操作List
      operationList: [],
      // 、操作list
      IsOpList: [],
      // 数据加载
      loading: false,
      //搜索
      selection: [],
      selected: '',
      id: '',
      coursename: '',
      titleText: '新增分类',
      titleList: [{ text: '题库管理' }],
      labelCol: { span: 4 },
      wrapperCol: { span: 14 },
      visible: false,
      select: [],
      mainTeacherIds: [],
      tiku: '',
      questionlist: [],
      teacherlist: [],
      teaid: [],
    };
  },
  filters: {
    // 封面筛选器
    filCourseImg(e) {
      var rx = /^https?:\/\//i;
      if (e) {
        if (!rx.test(e)) {
          e = 'https://cdn-zjy.icve.com.cn' + e;
        }
      } else {
        e = 'https://cdn-zjy.icve.com.cn/common/images/noCover.jpg';
      }
      return e;
    },
  },
  mounted() {
    this.getOpeartion();
  },
  methods: {
    // 获取页面操作
    getOpeartion() {
      this.loading = true;
      this.GetOperationList().then((rst) => {
        this.loading = false;
        this.loading = false;
        this.operationList = [];
        this.IsOpList = [];
        if (rst.code === 1) {
          if (rst.list.length) {
            rst.list.forEach((item) => {
              if (item.IsWrite || item.Name == 'add/edit/del:ques') {
                this.operationList.push(item.Name);
              }
            });
            this.IsOpList = rst.list;
          }
          this.getCourseList();
          this.getTeaList();
        } else {
          this.$message.error(rst.msg);
        }
      });
    },
    // 判断是否是只读
    getIsWrite(type) {
      type = 'add/edit/del';
      let index = this.IsOpList.findIndex((el) => {
        return el.Name === type;
      });
      if (index > -1) {
        if (this.IsOpList[index].IsRead && !this.IsOpList[index].IsWrite) {
          this.$message.info('您没有该操作权限！');
          return false;
        } else {
          return true;
        }
      }
    },
    //获取教师列表
    getTeaList() {
      this.$http
        .post('/api/design/course/getTeaList', {
          q: this.selected,
          courseId: '',
        })
        .then((res) => {
          this.selection = res;
        });
    },
    jump(data) {
      if (this.operationList.includes('add/edit/del:ques')) {
        this.$router.push({
          name: 'addQuestion',
          params: {
            addid: data.Id,
          },
        });
      } else {
        this.$message.info('您没有该操作权限！');
      }
    },
    // 判断是新增还是编辑
    sureModal() {
      if (this.titleText === '编辑分类') {
        this.addCategory(this.clickBatch, this.id, this.CreateName, this.titleText);
      } else {
        this.addCategory();
      }
    },
    //删除课程
    changeCourse(value) {
      if (!this.getIsWrite('删除')) {
        return;
      }
      var _this = this;
      this.$confirm({
        content: '确定要删除该分类吗',
        okText: '确定',
        cancelText: '取消',
        onOk() {
          _this.$http
            .post('/api/design/course/changeCourse', {
              id: value,
              type: 1,
            })
            .then((res) => {
              if (res.code > 0) {
                _this.getCourseList();
                _this.$message.success(res.msg);
              } else {
                _this.$message.success(res.msg);
              }
            });
        },
        onCancel() {},
      });
    },
    //我的课程
    getCourseList() {
      this.loading = true;
      this.$http
        .post('/api/design/course/getCourseList', {
          courseName: this.coursename,
          isDelete: 0,
        })
        .then((res) => {
          this.loading = false;
          this.questionlist = res.list;
        });
    },
    // 获取分类的信息
    getCaInfo(val) {
      this.loading = true;
      this.$http
        .post('/api/design/course/getCourseInfo', {
          id: val.Id,
        })
        .then((rst) => {
          this.loading = false;
          if (rst.code === 1) {
            this.clickBatch = rst.info;
            this.id = val.Id;
            this.CourseName = rst.info.Name;
            this.CreateName = [];
            this.visible = true;
            rst.teaList.forEach((item) => {
              let index = this.selection.findIndex((teacher) => {
                return teacher.id === item.UserId;
              });
              if (index > -1) {
                this.CreateName.push(this.selection[index].id);
                this.mainTeacherIds.push(this.selection[index].id);
              }
            });

            if (!rst.info.CoverUrl) {
              this.fileList = [];
            } else {
              this.fileList = [
                {
                  uid: val,
                  docUrl: rst.info.CoverUrl,
                  url: rst.coverUrl,
                },
              ];
            }
          } else {
            this.$message.error(rst.msg);
          }
        });
    },
    //新增编辑题库
    showModal(add, data) {
      if (add == 'add') {
        this.titleText = '新增分类';
        this.CourseName = '';
        this.CreateName = [];
        this.fileList = [];
        this.visible = true;
      } else {
        this.titleText = '编辑分类';
        this.getCaInfo(add);
      }
    },
    // //搜索多选
    selectTeacher(val) {
      this.mainTeacherIds = val;
    },
    searchList(value) {
      this.getCourseList(value);
    },
    //保存编辑
    addCategory(val1, val2, val3, val4) {
      let type = val1 ? '新增' : '编辑';
      let index = this.IsOpList.findIndex((el) => {
        return el.Name === type;
      });
      if (index > -1) {
        if (!this.IsOpList[index].IsWrite) {
          this.$message.info('您没有该操作权限，请先进行添加！');
          return;
        }
      }
      if (!val1) {
        if (!this.CourseName && !this.CreateName) {
          this.$message.error('标题不允许为空');
          return;
        }
      }
      this.loading = true;
      if (val4 == '编辑分类') {
        let url = this.fileList.length ? this.fileList[0].docUrl || this.fileList[0].response.url : '';
        this.$http
          .post('/api/design/course/saveCourse', {
            id: val2,
            mainTeacherIds: this.mainTeacherIds,
            name: this.CourseName,
            coverUrl: url,
          })
          .then((res) => {
            this.loading = false;
            if (res.code > 0) {
              this.visible = false;
              this.clickBatch = '';
              this.CourseName = '';
              this.mainTeacherIds = [];
              this.CreateName = '';
              this.fileList = '';
              this.$message.success(res.msg);
              this.getCourseList();
            } else {
              this.$message.error(res.msg);
            }
          });
      } else {
        let url = this.fileList.length ? this.fileList[0].docUrl || this.fileList[0].response.url : '';
        this.$http
          .post('/api/design/course/saveCourse', {
            id: val2,
            mainTeacherIds: this.mainTeacherIds,
            name: this.CourseName,
            coverUrl: url,
          })
          .then((res) => {
            this.loading = false;
            if (res.code > 0) {
              this.mainTeacherIds = [];
              this.visible = false;
              this.clickBatch = '';
              this.CourseName = '';
              this.CreateName = '';
              this.fileList = '';
              this.$message.success(res.msg);
              this.getCourseList();
            } else {
              this.$message.error(res.msg);
            }
          });
      }
    },
    handleCancels(e) {
      this.mainTeacherIds = [];
      this.visible = false;
    },
  },
};
</script>
